<template>
    <div class="main">
        <div class="welcome">
            <span>没有人会介意</span>
            <span>如此简陋的欢迎页</span>
            <span>吧···········</span>
            <span>'━(*｀∀´*)ノ亻奥来来······</span>
            <span>'━(*｀∀´*)ノ亻奥啦啦······</span>
            <router-link to="/index" class="s">
                gogogo
                <i class="fa  fa-hand-o-right" aria-hidden="true"></i>
            </router-link>
        </div>
    </div>
</template>
<script>
export default {
  name: 'welcome',
  methods: {
    ssd () {
      alert(123)
    }
  }
}
</script>
<style scoped>
@keyframes widthAdd{
    from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0); }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0); }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0); }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    }
}
.welcome :nth-child(1) {
    animation:widthAdd 3s ease;
}
.welcome :nth-child(2),
.welcome :nth-child(3),
.welcome :nth-child(4),
.welcome :nth-child(5),
.welcome :nth-child(6) {
    transform: translate3d(0, -3000px, 0);
    animation:widthAdd 3s ease;
    animation-fill-mode: forwards;
}
.welcome :nth-child(2) {
    animation-delay: 2s;
}
.welcome :nth-child(3) {
    animation-delay: 4s;
}
.welcome :nth-child(4) {
    animation-delay: 6s;
}
.welcome :nth-child(5) {
    animation-delay: 8s;
}
.welcome :nth-child(6) {
    animation-delay: 0s;
}
.main {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.welcome span,
.welcome a {
    display: block;
    color: red;
    font-size: 50px;
}
.welcome a {
    color: #555;
}
.welcome :nth-child(4),
.welcome :nth-child(5){
    color: blue;
}
.fa-hand-o-right {
    position:relative;
    animation:mymove 1s infinite;
    -webkit-animation:mymove 1s ease infinite;
    /* animation-direction: alternate; */
}
@keyframes mymove {
    from {left:0px;}
    to {left:20px;}
}
</style>
